<template>
  <div class="four-cornor-wrapper" @click="handleClick(item)" style="margin-top:-1px;">
      <i class="l"></i><i class="r"></i><i class="t"></i><i class="b"></i>
      <mu-row class="doctor-wrap">
        <mu-col width="25">
          <img class="doctor-img" :alt="item.doctorName" v-lazy="DOCTOR_AVATAR+item.localDoctorId+'.jpg'"/>
        </mu-col>
        <mu-col width="75" class="doctor-content">
          <h2 class="doctor-name">{{item.doctorName || item.regDeptName}}</h2>
          <div class="doctor-job">{{item.doctorLevelText || '暂无'}}</div>
          <p class="doctor-desc" style="doctorDescStyle">
            <i class="best">擅长</i>
            {{item.speciality || item.introduce || '暂无'}}
          </p>
        </mu-col>
       
      </mu-row>

        <!--  dialog  tips-->
      <mu-dialog :open="famuse_doctor_tips" title="温馨提示" @close="famuse_doctor_tips=false" dialogClass="appoint-dialog" scrollable>
        <p class="t5">{{FAMUSE_DOCTOR_TIPS}}</p>
        <p class="center">
          <img src="../assets/qrcode2.png" width="160" />
        </p>
        <div slot="actions" class="dialog-close" @click="famuse_doctor_tips=false">x</div>
      </mu-dialog>

  </div>
</template>

<script>
import {DOCTOR_LEVEL, DOCTOR_AVATAR, FAMUSE_DOCTORS, FAMUSE_DOCTOR_TIPS} from '../api/api'
export default {
  name: 'doctor-item-for-doctor',
  props: ['item', 'dayClickFlag'],
  data () {
    return {
      doctorDescStyle: {},
      dialog: false,
      times: [],
      DOCTOR_LEVEL: DOCTOR_LEVEL,
      dept: JSON.parse(localStorage.dept),
      DOCTOR_AVATAR: DOCTOR_AVATAR,
      FAMUSE_DOCTORS: FAMUSE_DOCTORS,
      FAMUSE_DOCTOR_TIPS: FAMUSE_DOCTOR_TIPS,
      famuse_doctor_tips: false
    }
  },
  methods: {
    handleClick (doctor) {
      localStorage.doctor = JSON.stringify(doctor)
      this.$router.push({
        path: '/doctor/schedule',
        query: {
          accessToken: localStorage.accessToken,
          localDoctorId: doctor.localDoctorId,
          doctorName: doctor.doctorName
        }
      })
    },
    close () {
      this.dialog = false
    }
  },
  components: {}
}
</script>

<style lang="less">
@import '../common/css/vars.less';
.doctor-wrap {
  margin: 8px;
  position: relative;
  .doctor-img {
    border-radius: 4px;
    width: 80px;
    height: 100px;
  }
  .doctor-content {
    padding:0 10px;
  }
  .doctor-name {
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    small {
      color: #999;
    }
  }
  .doctor-job{
    margin-top: 8px;
    font-size: .9em;
  }
  .doctor-desc {
    margin-top: 10px;
    color: #999;
    height: 2.8em;
    overflow: hidden;
    font-size: .9em;
    .best {
      font-style: normal;
      color: @color-primary;
      border: 1px solid @color-primary;
      border-radius: 4px;
      padding: 1px 4px 0;
      display:inline-block;
    }
  }
  .doctor-btn {
    position: absolute;
    top: 0;
    right: -16px;
    background-position: -159px 0;
    width: 122px;
    height: 44px;
    color: @color-primary;
    transform: scale(.6);
    .mu-flat-button-label{
      font-size: 1.5em;
    }
    &.dis {
      background-position: -159px -44px;
      color: #999;
    }
  }
}
</style>
